@use 'sass-true' as *;
@use '../scss/mixins.scss' as M;

@include test-module('mixin') {
  @include test('mixin custom selector') {
    @include output {
      @include M.theme-transition;
    }

    @include expect {
      ::view-transition-old(root),
      ::view-transition-new(root) {
        mix-blend-mode: normal;
        animation: none;
      }

      ::view-transition-old(root) {
        z-index: 1;
      }

      ::view-transition-new(root) {
        z-index: 2147483646;
      }

      .dark::view-transition-old(root) {
        z-index: 2147483646;
      }

      .dark::view-transition-new(root) {
        z-index: 1;
      }
    }

    @include output {
      @include M.theme-transition('[data-mode="dark"]');
    }

    @include expect {
      ::view-transition-old(root),
      ::view-transition-new(root) {
        mix-blend-mode: normal;
        animation: none;
      }

      ::view-transition-old(root) {
        z-index: 1;
      }

      ::view-transition-new(root) {
        z-index: 2147483646;
      }

      [data-mode='dark']::view-transition-old(root) {
        z-index: 2147483646;
      }

      [data-mode='dark']::view-transition-new(root) {
        z-index: 1;
      }
    }
  }
}
